<template>
  <van-row>
    <van-row>
      <van-search v-model='taskSearch' placeholder="请输入搜索关键词" @search="onSearch" />
    </van-row>
    <van-row>
      <van-col :span="4">
        <van-sidebar v-model="taskListActive" @change="onChange">

          <van-sidebar-item title="全部" v-if="allTaskCount>0" :badge="allTaskCount" />
          <van-sidebar-item title="全部" v-else />
          <van-sidebar-item title="待处理" v-if="pendingTaskCount>0" :badge="pendingTaskCount" />
          <van-sidebar-item title="待处理" v-else />
          <van-sidebar-item title="已处理" v-if="processedTaskCount>0" :badge="processedTaskCount" />
          <van-sidebar-item title="已处理" v-else />
          <van-sidebar-item title="已取消" v-if="cancelTaskCount>0" :badge="cancelTaskCount" />
          <van-sidebar-item title="已取消" v-else />
          <van-sidebar-item title="已忽略" v-if="ignoreTaskCount>0" :badge="ignoreTaskCount" />
          <van-sidebar-item title="已忽略" v-else />
        </van-sidebar>
      </van-col>
      <van-col :span="20">
        <!-- <router-view> -->
        <!-- 子路由的位置 -->
        <!-- </router-view> -->
        <list ref="ref_list" :changeTab="changeTab" :type="type"></list>
      </van-col>
    </van-row>

  </van-row>
</template>

<script>
  import {
    Cell,
    Toast,
    Tag,
    Row,
    Col,
    SwipeCell,
    Button,
    Dialog,
    Sidebar,
    SidebarItem,
    Search,
  } from 'vant'
  export default {
    describute: "任务列表",
    name: "tasklist",
    props: {
      //任务的类型
      type: {
        type: String,
        default: '0'
      },
      //导航栏的切换
      changeTab: {
        type: String
      }
    },
    components: {
      'van-cell': Cell,
      'van-tag': Tag,
      'van-col': Col,
      'van-row': Row,
      'van-swipe-cell': SwipeCell,
      'van-button': Button,
      'van-sidebar': Sidebar,
      'van-sidebar-item': SidebarItem,
      'van-search': Search,
      'list': () => import('../views/task/list'),
    },
    data: function () {
      return {
        allTaskCount: '',
        pendingTaskCount: '',
        processedTaskCount: '',
        cancelTaskCount: '',
        ignoreTaskCount: ''
      }
    },
    computed: {
      taskListActive: {
        get() {
          return this.$store.state.taskListActive
        },
        set(val) {
          this.$store.commit('updateTaskListActive', val);
        }
      },
      taskSearch: {
        get() {
          return this.$store.state.taskSearch
        },
        set(val) {
          this.$store.commit('updateTaskSearch', val);
        }
      }
    },
    methods: {
      async onChange(index) {
        // await this.$router.push(`/list/${index-1}`);
        //初始化数据
        await this.$refs.ref_list.onInitData();
      },
      async onSearch() {
        await this.searchCount();
        await this.$refs.ref_list.onInitData();
      },
      //查询数据的总数
      async searchCount() {
        var res = await this.$ajax.get(
          `/api/task/count?keyword=${this.$store.state.taskSearch}&organizationId=${ this.$user.getOrganizationId()}&userName=${ this.$user.getUserName()}&type=${this.type}`
        );
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        //数据赋值
        var data = res.data;
        this.allTaskCount = data.allTaskCount;
        this.pendingTaskCount = data.pendingTaskCount
        this.processedTaskCount = data.processedTaskCount
        this.cancelTaskCount = data.cancelTaskCount
        this.ignoreTaskCount = data.ignoreTaskCount
      }
    },
    async mounted() {
      //显示底部栏
      this.$store.commit('updateShowFoot', true)
      this.$eventBus.publish('connectionSocket');
      //更改页面底部的状态
      this.$store.commit('updatetTabberActive', this.changeTab ? this.changeTab : 'tasklist')
      await this.searchCount();
    }
  }

</script>
